<!--
 @description 品类风格筛选
 @fileName StyleFilterWindow.vue
 @author zengqiongying
 @created 2023/01/03 15:00:21
-->
<template>
  <Popup v-model="popShow" title="选择风格系列" :show-confirm-button="false" :show-cancel-button="false" position="bottom">
    <div class="style-filter-box" @scroll.stop @touchmove.stop>
      <div class="style-box">
        <Scroll vertical class="scoll-height">
          <div
            v-for="(item,i) in styleList"
            :key="i"
            :class="['style-item',{'active':styleConfId===item.id}]"
            @click="styleConfId=item.id"
          >
            {{ item.name }}
          </div>
        </Scroll>
      </div>
      <div class="serices-box">
        <Scroll vertical class="scoll-height">
          <div class="serices-list">
            <div
              v-for="(item,i) in sericesList"
              :key="i"
              :class="['serices-item',{'active':templateEv===`${item.attrId}_${item.itemId}`}]"
              @click="handleClick(item)"
            >
              {{ item.itemDesc }}
            </div>
          </div>
        </Scroll>
      </div>
    </div>
  </Popup>
</template>

<script>
import Popup from '@/components/Popup'
import Scroll from '@/components/Scroll'
import { getStyleSeries, getSeriesPageByStyleId } from '@/apis/index'
export default {
  name: 'StyleFilterWindow',
  components: { Popup, Scroll },
  props: {
    value: {
      type: String,
      default: ''
    },
    visiable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      styleConfId: '',
      styleList: [],
      sericesList: [],
      templateEv: ''
    }
  },

  computed: {
    popShow: {
      set(val) {
        this.$emit('update:visiable', val)
      },
      get(val) {
        return this.visiable
      }
    }
  },
  watch: {
    value: {
      handler(v) {
        this.templateEv = v
      },
      immediate: true
    },
    styleConfId(v) {
      this.getSericesList()
    },
    popShow(v) {
      this.limitScroll()
    }
  },

  created() {
    this.getTabList()
  },
  activated() {},

  mounted() {},

  methods: {
    getTabList() {
      getStyleSeries().then(res => {
        this.styleList = res.data || []
        if (this.styleList.length === 0) {
          this.styleConfId = ''
        } else {
          this.styleConfId = this.styleList[0].id
        }
      })
    },
    getSericesList() {
      if (!this.styleConfId) {
        this.sericesList = []
        return
      }
      const data = {
        page: 1,
        rows: 100,
        pageFlag: false,
        styleConfId: this.styleConfId
      }
      return getSeriesPageByStyleId(data).then(res => {
        this.sericesList = res.data.records || []
      })
    },
    handleClick(item) {
      const val = `${item.attrId}_${item.itemId}`
      this.$emit('input', this.templateEv === val ? '' : val)
    },
    // 限制滚动
    limitScroll() {
      if (this.popShow) {
        document.body.classList.add('limit-scroll')
      } else {
        document.body.classList.remove('limit-scroll')
      }
    }
  }
}

</script>
<style lang='less' scoped>
.limit-scroll{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.style-filter-box{
  --height:80vh;
  margin: 0 -6px;
  height: var(--height);
  display: flex;
  .style-box{
    width: 88px;
    padding-right: 10px;
    overflow: hidden;
    border-right:1px solid rgba(181,183,196,0.21);
    box-sizing: border-box;
    .style-item{
      padding: 8px 0;
      height: 56px;
      box-sizing: border-box;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      line-height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active{
        color: #00C8B4;
      }
    }
  }
  .serices-box{
    flex: 1;
    .serices-list{
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
    }
    .serices-item{
      width:calc(50% - 10px);
      margin-left:10px;
      margin-bottom: 12px;
      padding: 5px 10px;
      line-height: 18px;
      overflow: hidden;
      box-sizing: border-box;
      background: #FAFAFA;
      border-radius: 13px;
      color: #999999;
      font-size: 12px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active{
        background: #F5F5F5;
        font-size: 14px;
        font-weight: bold;
        color: #333;
      }

    }
  }
  .scoll-height{
    max-height:var(--height);
  }
}
</style>
